<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <title>工作台</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="plugins/bootstrap/bootstrap/css/bootstrap.min.css">
    <!--link rel="stylesheet" href="dist/css/font-awesome.min.css"-->
    <!-- font -->
    <link rel="stylesheet" href="dist/font/iconfont.css">
    <!-- myself style -->
    <link rel="stylesheet" href="dist/css/mainStyle.css">
    <link rel="stylesheet" href="dist/css/basicStyle.css">
    <link rel="stylesheet" href="dist/css/myupdate.css">
    <!--控件样式-->
     <link rel="stylesheet" href="plugins/layui/css/layui.css"  media="all">
     <link rel="stylesheet" href="plugins/layer/skin/layer.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style></style>
    </head>
    <body class="hold-transition skin-basic sidebar-mini">
    
<div class="wrapper">
<aside class="main-sidebar">
      <section class="sidebar"> 
      <a href="" class="logo"> 
      	<span class="logo-mini" style="height:60px;"><img  src="dist/img/inlogo.png" ></span> 
        <span class="logo-lg"><img src="dist/img/logo.png" width="170" /></span> 
      </a> 
      <a href="javascript:;" class="foldBtn pull-right sidebar-toggle" data-toggle="offcanvas" role="button">收起 </a>
    <div class="user-panel">
          <div class="text-center image"> <img src="dist/img/male.png" class="img-circle" alt="User Image">
        <p class="user-name text-bold">小弘</p>
        <div class="user-setting"> <a class="pull-left" href="#">账号设置</a> <a class="pull-right" href="#">退出登录</a> </div>
      </div>
        </div>
    <ul class="sidebar-menu">
          <li> <a href="javascript:;" id="workBoard"> <span>工作台</span> <span class="pull-right-container jiao"> <i class="iconfont">&#xe600;</i> </span> </a> </li>
          <li class="treeview active"> 
          <a href="javascript:;" id="project">
          	 <span>项目</span> 
         	 <span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span>
          </a>
        <ul class="treeview-menu">
              <li><a href="javascript:;">我的项目<span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span></a></li>
              <li><a href="javascript:;">你的项目<span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span></a></li>
              <li><a href="javascript:;">他的项目<span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span></a></li>
              <li><a href="javascript:;">她的项目<span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span></a></li>
            </ul>
      </li>
          <li class="treeview"> <a href="javascript:;" id="contactList"> <span>通讯录</span> <span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span> </a>
        <ul class="treeview-menu">
              <li><a href="javascript:;">我的项目<span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span></a></li>
              <li><a href="javascript:;">你的项目<span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span></a></li>
              <li><a href="javascript:;">他的项目<span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span></a></li>
              <li><a href="javascript:;">她的项目<span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span></a></li>
            </ul>
      </li>
          <li class="treeview"> <a href="javascript:;" id="schedule"> <span>日程</span> <span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span> </a>
        <ul class="treeview-menu">
              <li><a href="javascript:;">我的项目<span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span></a></li>
              <li><a href="javascript:;">你的项目<span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span></a></li>
              <li><a href="javascript:;">他的项目<span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span></a></li>
              <li><a href="javascript:;">她的项目<span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span></a></li>
            </ul>
      </li>
          <li class="treeview"> <a href="javascript:;" id="inform"> <span>通知</span> <span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span> </a>
        <ul class="treeview-menu">
              <li><a href="javascript:;">我的项目<span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span></a></li>
              <li><a href="javascript:;">你的项目<span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span></a></li>
              <li><a href="javascript:;">他的项目<span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span></a></li>
              <li><a href="javascript:;">她的项目<span class="pull-right-container"> <i class="iconfont">&#xe600;</i> </span></a></li>
            </ul>
      </li>
          <li> <a href="javascript:;" id="mySth"> <span>我的</span> <span class="pull-right-container jiao"> <i class="iconfont">&#xe600;</i> </span> </a> </li>
        </ul>
  </section>
    </aside>
<header class="main-header">
    <nav class="navbar navbar-static-top">
        <div class="localation">当前位置：<a href="">项目</a> > <a href="">项目列表</a></div>
    </nav>
    <!--nav class="navbar-default nav-mytab">
    	<ul>
        	<li class="tab-active"><a href="">基本信息</a></li>
            <li><a href="">被投公司</a></li>
            <li><a href="">财务信息</a></li>
        </ul>
    </nav-->
</header>

<div class="content-wrapper">
    <section class="content">
    	<div class="row">
        	<div class="col-lg-12 col-xs-12 connectedSortable">
            	<form action=" ">
                	<div class="searchBox">
                    	<label>
                        	<span>项目名称：</span>
                            <input class="name" type="text" placeholder="请输入要查找的项目名称">
                            <span id="upDown">收起筛选条件</span>
                        	<button class="searchbtn buttonActive">查询</button>
                            <button class="fc-button">新增</button>
                        </label>
                        <div class="searchItem_box">
                        <label>
                        	<span>项目类型：</span>
                        	<a>PE项目</a>
                            <a>房地产基金项目</a>
                            <a>夹层基金项目</a>
                            <a>成长基金项目</a>
                            <a>通用项目</a>
                            <a>PE项目</a>
                            <a>房地产基金项目</a>
                            <a>夹层基金项目</a>
                            <a>成长基金项目</a>
                            <a>通用项目</a>
                        </label>
                        <label>
                        	<span>项目阶段：</span>
                        	<a>项目源</a>
                            <a>初筛</a>
                            <a>PRE-DD</a>
                            <a>DD</a>
                            <a>投资执行</a>
                            <a>投后管理</a>
                            <a>完全退出</a>
                            <a>项目源</a>
                            <a>初筛</a>
                            <a>PRE-DD</a>
                        </label>
                        <label>
                        	<span>项目状态：</span>
                        	<a>推进中</a>
                            <a>暂停</a>
                            <a>投资执行</a>
                            <a>持续跟进</a>
                            <a>完成</a>
                        </label>
                        <label>
                        	<span>责任懂事：</span><input type="text" placeholder="请输入执行懂事名称">
                        	<span>项目经理：</span><input type="text" placeholder="请输入项目经理名称">
                            <span>基金：</span><input type="text" placeholder="请输入基金代码">
                        </label>
                        <label>
                        	<span>投资企业类型：</span>
                        	<a>国企改制</a>
                            <a>民企增长</a>
                            <a>跨进投资</a>
                            <a>其他</a>
                        </label>
                        </div>
                    </div>
                </form>
                <label class="list_lien"><span id="imgList"><img src="dist/img/imgbox.png"></span><span id="textList"><img src="dist/img/list_ico.png"></span></label>
                <div class="Items_Imgbox">
                	<div class="item-box">
                    	<div class="navIco color1">科技</div>
                        <div class="labelBox">
                        	<label class="label">高科技制造企业</label>
                            <label class="label color1_label">PE项目</label>
                        </div>
                        <div class="title">科技新产品系列-净水壶项目名称</div>
                        <div class="biaoqian"><span>项目阶段：PRE-DD</span><span class="faviotor"><img src="dist/img/faviotor.png">搜藏</span></div>
                    </div>
                    <div class="item-box">
                    	<div class="navIco color2">科技</div>
                        <div class="labelBox">
                        	<label class="label">高科技制造企业</label>
                            <label class="label color2_label">PE项目</label>
                        </div>
                        <div class="title">科技新产品系列-净水壶项目名称</div>
                        <div class="biaoqian"><span>项目阶段：PRE-DD</span><span class="faviotor"><img src="dist/img/faviotor.png">搜藏</span></div>
                    </div>
                    <div class="item-box">
                    	<div class="navIco color3">科技</div>
                        <div class="labelBox">
                        	<label class="label">高科技制造企业</label>
                            <label class="label color3_label">PE项目</label>
                        </div>
                        <div class="title">科技新产品系列-净水壶项目名称</div>
                        <div class="biaoqian"><span>项目阶段：PRE-DD</span><span class="faviotor"><img src="dist/img/faviotor.png">搜藏</span></div>
                    </div>
                    <div class="item-box">
                    	<div class="navIco color4">科技</div>
                        <div class="labelBox">
                        	<label class="label">高科技制造企业</label>
                            <label class="label color4_label">PE项目</label>
                        </div>
                        <div class="title">科技新产品系列-净水壶项目名称</div>
                        <div class="biaoqian"><span>项目阶段：PRE-DD</span><span class="faviotor"><img src="dist/img/faviotor.png">搜藏</span></div>
                    </div>
                    <div class="item-box">
                    	<div class="navIco color5">科技</div>
                        <div class="labelBox">
                        	<label class="label">高科技制造企业</label>
                            <label class="label color5_label">PE项目</label>
                        </div>
                        <div class="title">科技新产品系列-净水壶项目名称</div>
                        <div class="biaoqian"><span>项目阶段：PRE-DD</span><span class="faviotor"><img src="dist/img/faviotor.png">搜藏</span></div>
                    </div>
                    <div class="item-box">
                    	<div class="navIco color1">科技</div>
                        <div class="labelBox">
                        	<label class="label">高科技制造企业</label>
                            <label class="label color1_label">PE项目</label>
                        </div>
                        <div class="title">科技新产品系列-净水壶项目名称</div>
                        <div class="biaoqian"><span>项目阶段：PRE-DD</span><span class="faviotor"><img src="dist/img/faviotor.png">搜藏</span></div>
                    </div>
                    <div class="item-box">
                    	<div class="navIco color5">科技</div>
                        <div class="labelBox">
                        	<label class="label">高科技制造企业</label>
                            <label class="label color5_label">PE项目</label>
                        </div>
                        <div class="title">科技新产品系列-净水壶项目名称</div>
                        <div class="biaoqian"><span>项目阶段：PRE-DD</span><span class="faviotor"><img src="dist/img/faviotor.png">搜藏</span></div>
                    </div>
                    <div class="item-box">
                    	<div class="navIco color3">科技</div>
                        <div class="labelBox">
                        	<label class="label">高科技制造企业</label>
                            <label class="label color3_label">PE项目</label>
                        </div>
                        <div class="title">科技新产品系列-净水壶项目名称</div>
                        <div class="biaoqian"><span>项目阶段：PRE-DD</span><span class="faviotor"><img src="dist/img/faviotor.png">搜藏</span></div>
                    </div>
                    <div class="item-box">
                    	<div class="navIco color1">科技</div>
                        <div class="labelBox">
                        	<label class="label">高科技制造企业</label>
                            <label class="label color1_label">PE项目</label>
                        </div>
                        <div class="title">科技新产品系列-净水壶项目名称</div>
                        <div class="biaoqian"><span>项目阶段：PRE-DD</span><span class="faviotor"><img src="dist/img/faviotor.png">搜藏</span></div>
                    </div>
                    <div class="item-box">
                    	<div class="navIco color4">科技</div>
                        <div class="labelBox">
                        	<label class="label">高科技制造企业</label>
                            <label class="label color4_label">PE项目</label>
                        </div>
                        <div class="title">科技新产品系列-净水壶项目名称</div>
                        <div class="biaoqian"><span>项目阶段：PRE-DD</span><span class="faviotor"><img src="dist/img/faviotor.png">搜藏</span></div>
                    </div>
                    <div class="item-box">
                    	<div class="navIco color1">科技</div>
                        <div class="labelBox">
                        	<label class="label">高科技制造企业</label>
                            <label class="label color1_label">PE项目</label>
                        </div>
                        <div class="title">科技新产品系列-净水壶项目名称</div>
                        <div class="biaoqian"><span>项目阶段：PRE-DD</span><span class="faviotor"><img src="dist/img/faviotor.png">搜藏</span></div>
                    </div>
                </div>
                <div class="textList">
                	<ul>
                    	<li class="header">
                        	<dl>
                            	<dd class="num">编号</dd>
                                <dd class="pname">项目名称</dd>
                                <dd class="pclass">项目类型</dd>
                                <dd class="phy">行业</dd>
                                <dd class="pjd">阶段</dd>
                                <dd class="pzt">状态</dd>
                                <dd class="ptime">创建时间</dd>
                            </dl>
                        </li>
                        <li>
                        	<dl>
                            	<dd class="num">1</dd>
                                <dd class="pname">这里是项目的名称</dd>
                                <dd class="pclass">PE项目</dd>
                                <dd class="phy">一级行业二级行业</dd>
                                <dd class="pjd">初筛</dd>
                                <dd class="pzt">PRE-DD</dd>
                                <dd class="ptime">2016-11-10</dd>
                            </dl>
                        </li>
                        <li>
                        	<dl>
                            	<dd class="num">2</dd>
                                <dd class="pname">这里是项目的名称</dd>
                                <dd class="pclass">PE项目</dd>
                                <dd class="phy">一级行业二级行业</dd>
                                <dd class="pjd">初筛</dd>
                                <dd class="pzt">PRE-DD</dd>
                                <dd class="ptime">2016-11-10</dd>
                            </dl>
                        </li>
                        <li>
                        	<dl>
                            	<dd class="num">3</dd>
                                <dd class="pname">这里是项目的名称</dd>
                                <dd class="pclass">PE项目</dd>
                                <dd class="phy">一级行业二级行业</dd>
                                <dd class="pjd">初筛</dd>
                                <dd class="pzt">PRE-DD</dd>
                                <dd class="ptime">2016-11-10</dd>
                            </dl>
                        </li>
                        <li>
                        	<dl>
                            	<dd class="num">4</dd>
                                <dd class="pname">这里是项目的名称</dd>
                                <dd class="pclass">PE项目</dd>
                                <dd class="phy">一级行业二级行业</dd>
                                <dd class="pjd">初筛</dd>
                                <dd class="pzt">PRE-DD</dd>
                                <dd class="ptime">2016-11-10</dd>
                            </dl>
                        </li>
                        <li>
                        	<dl>
                            	<dd class="num">5</dd>
                                <dd class="pname">这里是项目的名称</dd>
                                <dd class="pclass">PE项目</dd>
                                <dd class="phy">一级行业二级行业</dd>
                                <dd class="pjd">初筛</dd>
                                <dd class="pzt">PRE-DD</dd>
                                <dd class="ptime">2016-11-10</dd>
                            </dl>
                        </li>
                        <li>
                        	<dl>
                            	<dd class="num">6</dd>
                                <dd class="pname">这里是项目的名称</dd>
                                <dd class="pclass">PE项目</dd>
                                <dd class="phy">一级行业二级行业</dd>
                                <dd class="pjd">初筛</dd>
                                <dd class="pzt">PRE-DD</dd>
                                <dd class="ptime">2016-11-10</dd>
                            </dl>
                        </li>
                        <li>
                        	<dl>
                            	<dd class="num">7</dd>
                                <dd class="pname">这里是项目的名称</dd>
                                <dd class="pclass">PE项目</dd>
                                <dd class="phy">一级行业二级行业</dd>
                                <dd class="pjd">初筛</dd>
                                <dd class="pzt">PRE-DD</dd>
                                <dd class="ptime">2016-11-10</dd>
                            </dl>
                        </li>
                        <li>
                        	<dl>
                            	<dd class="num">8</dd>
                                <dd class="pname">这里是项目的名称</dd>
                                <dd class="pclass">PE项目</dd>
                                <dd class="phy">一级行业二级行业</dd>
                                <dd class="pjd">初筛</dd>
                                <dd class="pzt">PRE-DD</dd>
                                <dd class="ptime">2016-11-10</dd>
                            </dl>
                        </li>
                        <li>
                        	<dl>
                            	<dd class="num">9</dd>
                                <dd class="pname">这里是项目的名称</dd>
                                <dd class="pclass">PE项目</dd>
                                <dd class="phy">一级行业二级行业</dd>
                                <dd class="pjd">初筛</dd>
                                <dd class="pzt">PRE-DD</dd>
                                <dd class="ptime">2016-11-10</dd>
                            </dl>
                        </li>
                        <li>
                        	<dl>
                            	<dd class="num">10</dd>
                                <dd class="pname">这里是项目的名称</dd>
                                <dd class="pclass">PE项目</dd>
                                <dd class="phy">一级行业二级行业</dd>
                                <dd class="pjd">初筛</dd>
                                <dd class="pzt">PRE-DD</dd>
                                <dd class="ptime">2016-11-10</dd>
                            </dl>
                        </li>
                        <li>
                        	<dl>
                            	<dd class="num">11</dd>
                                <dd class="pname">这里是项目的名称</dd>
                                <dd class="pclass">PE项目</dd>
                                <dd class="phy">一级行业二级行业</dd>
                                <dd class="pjd">初筛</dd>
                                <dd class="pzt">PRE-DD</dd>
                                <dd class="ptime">2016-11-10</dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <div class="pagelist"><div id="demo1"></div></div>
            </div>            
      </div>
        </section>
  </div>
	<footer class="main-footer"> <small class="center-block text-center">&copy; 2016-2020  弘毅投资  版权所有</small> </footer>
</div>



<script src="plugins/layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  
  laypage({
    cont: 'demo1'
    ,pages: 100 //总页数
    ,groups: 5 //连续显示分页数
  });
  
  //将一段数组分页展示
  
  //测试数据
  var data = [
    '北京',
    '上海',
    '广州',
    '深圳',
    '杭州',
    '长沙',
    '合肥',
    '宁夏',
    '成都',
    '西安',
    '南昌',
    '上饶',
    '沈阳',
    '济南',
    '厦门',
    '福州',
    '九江',
    '宜春',
    '赣州',
    '宁波',
    '绍兴',
    '无锡',
    '苏州',
    '徐州',
    '东莞',
    '佛山',
    '中山',
    '成都',
    '武汉',
    '青岛',
    '天津',
    '重庆',
    '南京',
    '九江',
    '香港',
    '澳门',
    '台北'
  ];
  
  var nums = 5; //每页出现的数据量
  
  //模拟渲染
  var render = function(curr){
    //此处只是演示，实际场景通常是返回已经当前页已经分组好的数据
    var str = '', last = curr*nums - 1;
    last = last >= data.length ? (data.length-1) : last;
    for(var i = (curr*nums - nums); i <= last; i++){
      str += '<li>'+ data[i] +'</li>';
    }
    return str;
  };
  
  //调用分页
  laypage({
    cont: 'demo8'
    ,pages: Math.ceil(data.length/nums) //得到总页数
    ,jump: function(obj){
      document.getElementById('biuuu_city_list').innerHTML = render(obj.curr);
    }
  });
  
});
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  var start = {
    min: laydate.now()
    ,max: '2099-06-16 23:59:59'
    ,istoday: false
    ,choose: function(datas){
      end.min = datas; //开始日选好后，重置结束日的最小日期
      end.start = datas //将结束日的初始值设定为开始日
    }
  };
  
  var end = {
    min: laydate.now()
    ,max: '2099-06-16 23:59:59'
    ,istoday: false
    ,choose: function(datas){
      start.max = datas; //结束日选好后，重置开始日的最大日期
    }
  };
  
  document.getElementById('LAY_demorange_s').onclick = function(){
    start.elem = this;
    laydate(start);
  }
  document.getElementById('LAY_demorange_e').onclick = function(){
    end.elem = this
    laydate(end);
  }
  
});
</script>

<!-- jQuery 2.2.3 --> 
<script src="plugins/jquery/jquery-1.9.1.js"></script> 
<script type="text/javascript">
	$(function(){
		//编辑模块
		$(".box-header .project-edit").click(function(){
			$(this).parents(".col-lg-12").find("input").removeAttr("disabled").addClass("justShow");
			})
		//保存模块
		$(".box-header .project-save").click(function(){
				$(this).parents(".col-lg-12").find("input").attr("disabled","disabled").removeClass("justShow");
			})
		//删除模块
		$(".box-header .project-delete").click(function(){
				$(this).parents(".col-lg-12").remove();
			})
		//添加一行
		$(".box-header .project-addline").click(function(){
				$(this).parents(".col-lg-12").find(".box-body .addline").append("<dl><dd><input class='addborder1' type='text'></dd><dd><input type='text' class='addborder1'></dd><dd><input class='addborder1' type='text'></dd><dd><input class='addborder1' type='text'></dd></dl>");
			})
						
		$("#textList").click(function(){
			$(this).hide();
			$(".Items_Imgbox").addClass("hide");
			$("#imgList").show();
			$(".textList").addClass("show");
		})
		$("#imgList").click(function(){
			$(this).hide();
			$("#textList").show();
			$(".textList").removeClass("show");
			$(".Items_Imgbox").removeClass("hide");
			$(".Items_Imgbox").addClass("show");
			})
			
			$("#upDown").click(function(){
				$(".searchItem_box").slideToggle(600);
	
				})
		})
</script>

<!-- jQuery UI 1.11.4 --> 
<script src="dist/js/jquery-ui.min.js"></script> 
<!-- Bootstrap 3.3.6 --> 
<script src="plugins/bootstrap/bootstrap/js/bootstrap.js"></script> 
<!-- date table self --> 
<script src="dist/js/calendar.js"></script> 
<!-- angular js ---> 
<script src="plugins/angular/angular-1.5.8.js"></script> 
<script src="dist/js/moment.min.js"></script> 
<!-- Slimscroll --> 
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script> 
<!-- myself js --> 
<script type="text/javascript" src="dist/js/basicScript.js"></script> 
<script type="text/javascript" src="dist/js/app.js"></script>
          

</body>
</html>
